<template>
  <button @click="show=!show">显示影藏</button>
   <transition>
  <div v-if="show" style="width:200px;height:200px;background-color:pink"></div>
   </transition>
</template>

<script>
export default {
  data () {
    return {
      show: true
    }
  }
}
</script>
<style lang="less" scoped>
// 元素入场 enter - 3个类名
.v-enter-from{
  opacity: 0;
}
.v-enter-active{
  transition: all 2s;
}
.v-enter-to{
  opacity: 1;
}

// 元素离场  leave - 3个类名
.v-leave-from {
  transform: translateX(0);
  opacity: 1;
}

.v-leave-active{
  transition: all 2s;
}

.v-leave-to {
  transform: translateX(500px);
  opacity: 0;
}
</style>
